<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
import { ref } from 'vue'
const goBack = () => {
    router.push('/wode')
  Snackbar({
    // content: '返回',
    position: 'top'
  })
};
const active = ref(0)
let shuliang1 = ref(10);
let shuliang2 = ref(3);
let minchen = ref("彭德楷黄焖鸡米饭");
let dizhi = ref("江了是那个六年是那个六年两三年老师");
let time = ref("2022.06.16");
let qm = ref("同享券");
let jg = ref(3);
let mk = ref("无门槛");
let jieshao = ref("可与其他活动优惠券同时享受，在线支付专享。限指定门店使用。不可到店自取。");
</script>
<template>
<var-app-bar title="商家代金券" title-position="center" text-color="black" color="#fff">
    <template #left>
        <var-button
            round
            text
            color="transparent"
            text-color="black"
            @click="goBack"
        >
            <var-icon name="chevron-left" :size="24" />
        </var-button>
    </template>
</var-app-bar>
    <div style="background:#f3f3f3;padding-bottom:50px;">
        <var-tabs v-model:active="active" can-swipe="false">
            <var-tab>满减券({{shuliang1}})</var-tab>
            <var-tab>商品券({{shuliang2}})</var-tab>
        </var-tabs>
        <var-tabs-items v-model:active="active">
            <var-tab-item>
                <div style="margin:10px 20px;background:#fff;" v-for="item in 10">
                    <div style="position: relative;height: 120px;">
                        <div style="height:80px;border-bottom: 1px dashed #f0f0f0;">
                            <img src="https://img2.baidu.com/it/u=719264304,163113627&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=354" alt="" style="float:left; width:50px;height:50px;margin:15px 10px;">
                            <div style="float:left;width:50%;margin-top:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                <span style="width:80px; font-size:16px;">{{minchen}}({{dizhi}})</span><br>
                                <span style="font-size: 12px;color: #818181;">有效期至{{time}}</span>
                            </div>
                            <div style="float:left;border:1px solid #e6e5e4;margin-top: 20px;font-size: 13px;color: #b5b4b2;margin-left:10px;">{{qm}}</div>
                            <div style="float:right;text-align: center;font-size: 13px;margin-top:15px;margin-right: 5px;">
                                <p style="color: red;">￥<span style="font-size:26px;font-weight: bold;">{{jg}}</span></p>
                                <p style="color: #818181;margin-top: -10px;">{{mk}}</p>
                            </div>
                        </div>
                        <div style="width: 99%;float:left;font-size: 12px;margin-left:10px;margin-top: -5px;">
                            <div style="width:70%;color: #9e9c99;float:left;">{{jieshao}}</div>
                            <var-button size="mini" style="float:right;margin-right: 10px;margin-top: 3px;" color="#fe6263" text-color="#fff">立即使用</var-button>
                        </div>
                        <div style="position: absolute;width: 10px;height: 10px;border-radius: 50%;background: #f3f3f3;z-index: 2;left: -5px;top: 75px;"></div>
                        <div style="position: absolute;width: 10px;height: 10px;border-radius: 50%;background: #f3f3f3;z-index: 2;right: -5px;top: 75px;"></div>
                    </div>
                </div>
            </var-tab-item>
            <var-tab-item>
                 <div style="margin:10px 20px;background:#fff;" v-for="item in 3">
                    <div style="position: relative;height: 120px;">
                        <div style="height:80px;border-bottom: 1px dashed #f0f0f0;">
                            <img src="https://img2.baidu.com/it/u=719264304,163113627&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=354" alt="" style="float:left; width:50px;height:50px;margin:15px 10px;">
                            <div style="float:left;width:50%;margin-top:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                <span style="width:80px; font-size:16px;">{{minchen}}({{dizhi}})</span><br>
                                <span style="font-size: 12px;color: #818181;">有效期至{{time}}</span>
                            </div>
                            <div style="float:left;border:1px solid #e6e5e4;margin-top: 20px;font-size: 13px;color: #b5b4b2;margin-left:10px;">{{qm}}</div>
                            <div style="float:right;text-align: center;font-size: 13px;margin-top:15px;margin-right: 5px;">
                                <p style="color: red;">￥<span style="font-size:26px;font-weight: bold;">{{jg}}</span></p>
                                <p style="color: #818181;">{{mk}}</p>
                            </div>
                        </div>
                        <div style="width: 99%;float:left;font-size: 12px;margin-left:10px;margin-top: -5px;">
                            <div style="width:70%;color: #9e9c99;float:left;">{{jieshao}}</div>
                            <var-button size="mini" stylce="float:right;margin-right: 10px;margin-top: 3px;" color="#fe6263" text-color="#fff">立即使用</var-button>
                        </div>
                        <div style="position: absolute;width: 10px;height: 10px;border-radius: 50%;background: #f3f3f3;z-index: 2;left: -5px;top: 75px;"></div>
                        <div style="position: absolute;width: 10px;height: 10px;border-radius: 50%;background: #f3f3f3;z-index: 2;right: -5px;top: 75px;"></div>
                    </div>
                </div>
            </var-tab-item>
        </var-tabs-items>
    </div>
</template>
<style lang="scss" scoped>
.var-elevation--3{
  box-shadow: none !important;
}
</style>